<template>
	<!-- 10.25 将拼团文字修改掉 -->
	<view class="app-participant">
		<view v-if="ptBool">
			<app-participant-model :theme="theme" v-model="ptBool" :pintuan_list="list"></app-participant-model>
		</view>

		<!-- <view class="app-spec dir-left-nowrap main-between cross-center" @click="route_go">
			<view class="item">
				拼团规则
			</view>
		</view> -->
		<view class="app-content" v-if="list.length > 0">
			<view class="app-peo-text dir-left-nowrap main-between cross-center">
				<text>以下小伙伴正在发起购买邀请，您可以直接参与：</text>
				<view v-if="list.length > 1">
					<app-form-id @click="ptBool = true">
						<text class="app-text">查看更多</text>
						<image class="app-icon" src="../../../static/image/icon/arrow-right.png"></image>
					</app-form-id>
				</view>
			</view>

			<!-- #ifndef MP-ALIPAY -->
			<template v-if="list.length === 1">
				<block v-for="(item, index) in 1" :key="index">
					<view class="app-item dir-left-nowrap main-between">
						<view class="dir-left-nowrap cross-center">
							<image class="app-icon" :src="list[item].avatar"></image>
							<text class="app-name">{{list[item].nickname}}</text>
						</view>
						<view class="dir-left-nowrap cross-center">
							<view class="app-text dir-top-nowrap main-between">
								<text class="app-red">还差{{list[item].surplus_people}}人可购买成功</text>
								<view class="app-gray">
									<app-surplus-time :surplus_date_time="list[item].surplus_date_time">
									</app-surplus-time>
								</view>
							</view>
							<view class="app-go" :style="{'line-height':list[item].is_abbuy == 1?'50rpx' :'100rpx'}"
								:class="theme + '-m-back ' + theme" @click="goJoin">
								<view class="">
									<view class="">
										参与购买
									</view>
									<view class="" v-if="list[item].is_abbuy == 1">
										{{list[item].abbuy_type}}商品可购买
									</view>
								</view>
								<!-- <app-jump-button form :url="`/plugins/pt/detail/detail?id=${list[item].id}`">
									去参团
								</app-jump-button> -->
							</view>
						</view>
					</view>
				</block>
			</template>

			<template v-if="list.length >= 2">
				<block v-for="(item, index) in 2" :key="index">
					<view class="app-item dir-left-nowrap main-between">
						<view class="dir-left-nowrap cross-center">
							<image class="app-icon" :src="list[item].avatar"></image>
							<text class="app-name">{{list[item].nickname}}</text>
						</view>
						<view class="dir-left-nowrap cross-center">
							<view class="app-text dir-top-nowrap main-between">
								<text class="app-red">还差{{list[item].surplus_people}}人可购买成功</text>
								<view class="app-gray">
									<app-surplus-time :surplus_date_time="list[item].surplus_date_time">
									</app-surplus-time>
								</view>
							</view>
							<view class="app-go" :class="theme + '-m-back ' + theme" @click="goJoin">
								<view class="">
									参与购买
								</view>
								<!-- <app-jump-button form :url="`/plugins/pt/detail/detail?id=${list[item].id}`">
									去参团
								</app-jump-button> -->
							</view>
						</view>
					</view>
				</block>
			</template>
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
	import appSurplusTime from './app-surplus_time.vue';
	import appParticipantModel from './app-participant-model.vue';

	export default {
		name: 'app-participant',
		data() {
			return {
				ptBool: false,
				show: 0,
				selectAttr: {},
				attr: {},
				list: []
			}
		},
		props: {
			pintuan_list: {
				type: Array,
				default () {
					return [];
				}
			},
			theme: String
		},

		methods: {
			route_go() {
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(this.$api.pt.index)}&keys=${JSON.stringify(['setting', 'new_rules'])}`,
				});
			},
			goJoin() {
				this.$emit('goJoin')
			}
		},
		components: {
			'app-surplus-time': appSurplusTime,
			'app-participant-model': appParticipantModel
		},

		watch: {
			pintuan_list: {
				handler(data) {
					this.list = data;
				},
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-spec {
		height: #{160rpx};
		padding: #{36upx 80upx 30upx 80upx};
		flex-wrap: wrap;
		justify-content: start;

		.arrow {
			width: #{38upx};
			height: #{30upx};
		}

		.item {
			padding-left: 20rpx;

			image {
				width: #{50upx};
				height: #{50upx};
				margin-bottom: #{10upx};
			}

			text {
				font-size: #{24upx};
				line-height: 1;
				color: #666666;
				margin-top: #{10upx};
			}
		}
	}

	.app-participant {
		width: #{750rpx};
		background-color: white;

		.app-left {
			font-size: #{24rpx};
			color: #666666;
		}

		.app-right {
			width: #{134rpx};
		}

		.app-text {
			font-size: #{24rpx};
			color: #999999;
		}

		.app-icon {
			width: #{12rpx};
			height: #{22rpx};
			margin-left: #{12rpx};
		}

		.app-content {
			padding: #{0 24upx 20upx 24upx};
			box-sizing: border-box;
		}

		.app-peo-text {
			font-size: #{24rpx};
			color: #666666;
			padding: #{24rpx} 0;
			box-sizing: border-box;

			.app-icon {
				width: #{12rpx};
				height: #{22rpx};
				margin-left: #{12rpx};
			}

			.app-text {
				font-size: #{24rpx};
				color: #999999;
			}
		}

		.app-item {
			height: #{100rpx};
			background-color: #f6f6f6;
			width: #{750-48rpx};
			border-bottom-left-radius: #{8rpx};
			border-top-left-radius: #{8rpx};
			margin-bottom: #{10rpx};

			.app-icon {
				height: #{80rpx};
				width: #{80rpx};
				border-radius: 50%;
				margin-left: #{20rpx};
			}

			.app-name {
				font-size: #{28rpx};
				color: #353535;
				width: #{210rpx};
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-left: #{16rpx};
			}

			.app-go {
				width: #{140rpx};
				height: #{100rpx};
				// line-height: 100rpx;
				line-height: 50rpx;
				font-size: #{24rpx};
				text-align: center;
				color: #ffffff;
				margin-left: #{36rpx};
			}

			.app-text {
				font-size: #{24rpx};
				width: #{198rpx};
				height: #{100rpx};

				text {
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				.app-red {
					color: #ff5c5c;
					margin-top: #{14rpx};
				}

				.app-gray {
					color: #707070;
					margin-bottom: #{14rpx};
				}
			}
		}
	}
</style>
